<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    ctx.font = '100px 微软雅黑'

    // 渐变配置
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
    gradient.addColorStop(0, "yellow")
    gradient.addColorStop(0.3, "purple")
    gradient.addColorStop(0.5, "blue")
    gradient.addColorStop(0.7, "grey")
    gradient.addColorStop(1, "red")

    // 使用渐变
    ctx.fillStyle = gradient
    ctx.fillText("今天天气好晴朗,处处好风光", 0, 100, 250)

    // 使用渐变
    ctx.strokeStyle = gradient
    ctx.strokeText("空心字体内容测试", 0, 300, 500)

</script>
</body>
</html>
